<template>
  <div>
    <van-search v-model="value" placeholder="搜索菜谱" @search="onSearch" />

    <!-- van-tabs 的 active 仍绑定，但会通过路由监听自动更新 -->
    <van-tabs v-model:active="active" @change="handleTabChange">
      <van-tab title="关注" name="follow"></van-tab>
      <van-tab title="推荐" name="recommend"></van-tab>
      <van-tab title="减脂" name="fatReduct"></van-tab>
      <van-tab title="商店" name="shop"></van-tab>
      <van-tab title="分类" name="recipeType"></van-tab>
    </van-tabs>
    
    <!-- 三级路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue' // 1. 引入 watch 用于监听路由
import { useRouter, useRoute } from 'vue-router' // 2. 引入 useRoute 获取当前路由
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute() // 3. 获取当前路由实例
const active = ref('recommend') // 默认激活“推荐”
const value = ref('')

// 4. 核心：监听路由变化，同步更新 active
watch(
  () => route.path, // 监听路由路径的变化（如 /myhome/fatReduct → /myhome/recommend）
  (newPath) => {
    // 从路由路径中提取三级路由的名称（如 /myhome/fatReduct → 提取 'fatReduct'）
    const tabName = newPath.split('/')[2] // split('/') 后数组是 ['', 'myhome', 'fatReduct']
    // 如果提取到有效名称（防止路由异常），更新 active
    if (['follow', 'recommend', 'fatReduct', 'shop', 'recipeType'].includes(tabName)) {
      active.value = tabName
    }
  },
  { immediate: true } // 5. 初始化时立即执行一次（确保页面加载时就同步路由和 active）
)

// 标签切换时，跳转路由（逻辑不变）
const handleTabChange = (name) => {
  router.push({
    path: `/myhome/${name}`
  })
}

// 搜索功能（逻辑不变）
const onSearch = (val) => {
  showToast(val)
  router.push({
    path: "/searchResult",
    query: {
      search: val
    }
  })
}
</script>

<style scoped>
/* 样式不变，省略 */
</style>